<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .banner{width:400px;height:100px;margin:50px auto;position: relative;background:#ccc;overflow: hidden;}

        .imgbox a{position:absolute;width:400px;height:100px;left:400px;top:0;}
        .imgbox a img{width:400px;height:100px;}

        .btns>*{position:absolute;width:20px;height:20px;background: rgba(200,200,200,0.7);text-align:center;line-height:20px;top:40px;}
        .btns .left{left:0}
        .btns .right{right:0}

        .list{position: absolute;bottom:0;background:rgba(200,200,200,0.7);display:flex;left:0;right:0;text-align: center;line-height:20px;height:20px;}
        .list span{flex:1;border-left:solid 1px #fff;border-right:solid 1px #fff;}
        .list span.active{background:red;color:#fff}

    </style>
</head>
<body>
    <div class="banner"></div>
</body>
<script>
    // 分析：轮播图
        // 控制方式（功能）
            // 控制1：左右按钮
            // 控制2：分页器
            // 控制3：自动播放
            // 效果：分页器，左右按钮，联动    
            // 封装之后通过参数，控制不同的轮播图
            // new Banner({box, imgs, btns, list, autoPlay, delayTime, index});
        // 假设布局
            // 将来使用js生成的布局提前写出来，设计好css，再把布局结构删除
        // 功能
            // 1. 创建架构，设置样式，添加到页面
            // 2. 左右按钮功能
                // 2.1 判断是否需要左右按钮
                // 2.2 绑定事件
                    // 2.3 计算索引
                        // 是临界值，单独处理
                        // 不是临界值，加1或减1
                    // 2.4 根据索引切换图片
                        // 借助move动画切换
    
    // 设计
    // function Banner(){}
    // Banner.prototype.xxx = function(){}

    // 编程
    function Banner(ops={}){
        // 接收并处理默认参数
        this.box = ops.box;
        this.imgs = ops.imgs;
        this.btns = ops.btns===undefined ? true : ops.btns;
        this.list = ops.list===undefined ? true : ops.list;
        this.autoPlay = ops.autoPlay===undefined ? true : ops.autoPlay;
        this.index = ops.index || 0;
        this.delayTime = ops.delayTime || 2000;

        // 用来记录左右按钮时，要走的图片的索引
        this.prev = null;

        // 1. 创建架构，设置样式，添加到页面
        // 2. 绑定事件

        // 创建imgbox          
        this.createImgbox();

        // 根据外部参数决定是否需要左右按钮
        if(this.btns){
            // B1. 创建btns
            this.createBtns();
            // B2. 绑定所有按钮事件
            this.addBtnsEvent();
        }
        
        // 根据外部参数决定是否需要分页器
        if(this.list){
            // L1. 创建list
            this.createList();
            // L2. 绑定list的事件
            // this.addListEvent();
        }
    }

    Banner.prototype.createList = function(){
        // <div class="list">
        //     <span>0</span>
        //     <span>1</span>
        //     <span>2</span>
        //     <span>3</span>
        // </div>
        // 创建分页器的容器
        this.listBox = createEle("list", this.box);
        // 根据图片数据的数量，通过字符串拼接，创建分页器内的结构
        str = "";
        this.imgs.forEach((val,idx)=>{
            str += `<span>${idx}</span>`
        })
        this.listBox.innerHTML = str;

        // 设置默认图片对应的分页器高亮
        this.listBox.children[this.index].className = "active";
    }

    Banner.prototype.createBtns = function(){
        // <div class="btns">
        //     <span class="left">&lt;</span>
        //     <span class="right">&gt;</span>
        // </div>
        // 创建按钮容器
        this.btnsBox = createEle("btns", this.box);
        // 创建左按钮
        this.left = createEle("left", this.btnsBox);
        // 创建右按钮
        this.right = createEle("right", this.btnsBox);
        // 设置左右按钮的文字
        this.left.innerHTML = "&lt;";
        this.right.innerHTML = "&gt;";
    }

    Banner.prototype.createImgbox = function(){
        // <div class="imgbox">
        //     <a href=""><img src="./imgs/banner1.jpg" alt=""></a>
        // </div>
        // 创建imgbox容器，设置选择器，并插入到指定页面容器
        this.imgbox = createEle("imgbox", this.box);

        // 根据图片数据，通过字符串拼接，创建imgbox内的结构
        let str = "";
        this.imgs.forEach(val=>{
            str += `<a href="${val.href}"><img src="${val.src}" alt="${val.alt}" title="${val.title}"></a>`;
        })
        this.imgbox.innerHTML = str;

        // 设置默认图片
        this.imgbox.children[this.index].style.left = "0";
    }

    Banner.prototype.addBtnsEvent = function(){
        const that = this;
        this.left.onclick = function(){
            // B3-1. 改变索引
            that.changeIndex(1);
        }
        this.right.onclick = function(){
            // B3-2. 改变索引
            that.changeIndex(2);
        }
    }

    Banner.prototype.changeIndex = function(d){
        if(d === 1){
            // 左按钮计算索引
            // B4. 判断是否是临界值
            if(this.index === 0){
                // 单独处理
                this.index = this.imgs.length-1;
                // 同步保存上一个索引（要走的图片的索引）
                this.prev = 0;
            }else{
                // 减1
                this.index--;
                // 同步保存上一个索引（要走的图片的索引）
                this.prev = this.index+1;
            }
            // B5. 根据索引切换图片
            this.move(this.prev, this.index);
        }else{
            // 右按钮计算索引
            if(this.index === this.imgs.length-1){
                this.index = 0;
                this.prev = this.imgs.length-1
            }else{
                this.index++;
                this.prev = this.index-1;
            }
            this.move(this.prev, this.index);
        }
    }

    Banner.prototype.move = function(prev, now){
        const imgs = this.imgbox.children;
        // 从哪开始走
        // ？
        // 走到哪
        imgs[prev].style.left = -imgs[0].offsetWidth + "px";

        // 从哪进来
        // ？
        // 进到哪
        imgs[now].style.left = 0;

        // 判断是否存在分页器
        if(this.list){
            // 分页器的高亮和图片索引同步
            this.listBox.children[prev].className = "";
            this.listBox.children[now].className = "active";
        }
    }




    function createEle(className, parent){
        const ele = document.createElement("div")
        ele.className = className;
        parent.appendChild(ele);
        return ele;
    }


    const box = document.querySelector(".banner");
    const imgs = [{
        src:"./imgs/banner1.jpg",
        title:"广告1",
        href:"banner1",
        alt:"这是广告1"
    },{
        src:"./imgs/banner2.jpg",
        title:"广告2",
        href:"banner2",
        alt:"这是广告2"
    },{
        src:"./imgs/banner3.jpg",
        title:"广告3",
        href:"banner3",
        alt:"这是广告3"
    },{
        src:"./imgs/banner4.jpg",
        title:"广告4",
        href:"banner4",
        alt:"这是广告4"
    },{
        src:"./imgs/banner5.jpg",
        title:"广告5",
        href:"banner5",
        alt:"这是广告5"
    },{
        src:"./imgs/banner6.jpg",
        title:"广告6",
        href:"banner6",
        alt:"这是广告6"
    },{
        src:"./imgs/banner7.jpg",
        title:"广告7",
        href:"banner7",
        alt:"这是广告7"
    }];

    // 执行轮播图功能，传入指定参数
    new Banner({
        box, imgs, 
        // index: 5
        // btns: false,
        // list: true,
        // autoPlay: true,
        // delayTime: 3000,
    });

        



    

</script>
</html>